<template>
  <!--优选商品-->
  <div class="hotsale-goods">
    <div class="ht-header">
      <span>今日优选</span>
    </div>
    <div class="hot-item">
      <swiper :options="swiperOption">
        <swiper-slide v-for="(page,index) in pages" :key="index" class="ht-wrapper" >
          <div class="ht-item" v-for="(item,index) in page" :key="item.id">
            <div class="ht-img">
              <img :src="item.imgUrl" :title="item.name" :alt="item.name" class="icon-img-content" @click="handleClick(item.id)">
            </div>
          </div>
        </swiper-slide>
        <div class="swiper-button-prev">
          <i class="el-icon-arrow-left"></i>
        </div>
        <div class="swiper-button-next">
          <i class="el-icon-arrow-right"></i>
        </div>
        <div class="swiper-pagination"  slot="pagination"></div>
      </swiper>
    </div>
  </div>
</template>

<script>
  export default {
    name: "HotSale",
    data () {
      return {
        swiperOption: {
          pagination:{
            el: '.swiper-pagination',
            clickable :true,
          },
          autoplay: false,
          loop: true,
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
          effect : 'flip',
        },
        currentNum: '1'
      }
    },
    props: {
      list: {
        type: Array,
        default: []
      }
    },
    methods: {
      handleClick (id) {
        this.$router.push({path:'/goods_info',query:{itemId: id}})
      }
    },
    computed: {
      pages () {
        const pages = [];
        this.list.forEach((item, index)=>{
          const page = Math.floor(index/5);
          if (!pages[page]) {
            pages[page] = []
          }
          pages[page].push(item)
        });
        return pages
      },
    },
  }
</script>

<style lang="stylus" scoped>
  @import '~@/assets/css/common.styl'
  /*  优选商品 -- 轮播  */
  .hotsale-goods {
    padding: $commonPadding;
  }
  .ht-header {
    padding: 20px 5px;
  }
  .ht-wrapper {
    width: 100%;
    position: relative;
  }
  .ht-item {
    width: 19%;
    float: left;
    height: 0;
    padding-bottom: 19%;
    margin: 0 .5%;
    position: relative
  }
  .ht-img img {
    width: 100%;
    background: #fbfbfb;
    cursor: pointer;
    transition: all 0.6s;
  }
  .ht-img img:hover {
    transform: scale(1.1)
    background: #f7efef;
    cursor: pointer;
  }
  .hot-item >>> .swiper-pagination-bullets {
    bottom: 0;
  }
  .hotsale-goods {
    overflow: hidden
  }
  .hot-item >>> .swiper-container {
    overflow: hidden;
  }
  .swiper-button-prev, .swiper-button-next {
    background: rgba(226, 222, 222, 0.3);
    color: #585757;
    text-align: center;
    line-height: 46px;
  }
  /*  栏目标题  */

</style>
